<template>
    <div class="body-color">
        <Header></Header>
        <div class="container-fluid">
            <div>

                <div class="block-title">
                    <h1>Transaction Details</h1>
                    <div>Hash: {{inputValue}}</div> 
                </div>
                <hr>
               
            </div>
            
            <!--  -->
            <div class="block-body">
              <div class="block-left">
              <div>  Transaction Hash:</div>
              <div>  Block:</div>
              <div>  Timestamp:</div>
              
              <hr id="block-hr">
              <div>  From:</div>
              <div>  To:</div>
              <hr id="block-hr">
              <div> Value:</div>
              <div>  Transaction Fee:</div>
              <div>  Gas Price:</div>
              </div>
              <div class="block-right" v-if="isShow">
              <div>  {{items.hash==""||null?"0X":items.hash}}</div>
              <div>  {{items.blockNumber==""||null?"0":items.blockNumber}}</div>
              <div>  {{getTimeDifference(items.timestamp==""||null?"0":items.timestamp)}}</div>
             
              <hr id="block-hr">
              <div @click="goToFromAddressIfo(item)">  {{items.from}}</div>
              <div>  {{items.to==""?"null":items.to}}</div>
              <hr id="block-hr">
              <div> {{items.value==""||null?"0":items.value}}</div>
              <div>  {{items.gas*items.gasPrice}}</div>
              <div>  {{items.gasPrice==""||null?"0":items.gasPrice}}</div>
              </div>
            
            </div>


        </div>
        <Footer></Footer>
    </div>
</template>

<script>
import '@/assets/css/TransactionInfo.css'
import {getTransactionInfo} from "@/api/home.js"
export default {
    name: 'BlockInfo',
    data(){
        return{
            inputValue: '',
            items:{},
            isShow:true,

        }
    },
  methods:{
     formatString(str) {
      if (str.length <= 20) {
        return str;
      } else {
        return `${str.substr(0, 8)}....${str.substr(-8)}`;
      }
    },

 goToFromAddressIfo(item){
    this.$router.push({name:'transactionInfoAddress',params:{inputValue:item.from}})
  },
   
    getTimeDifference(time){
       var times= this.differenceInSeconds(time);//秒
       if(times>60){
        times= (times / 60).toFixed(0); //分
        if(times>60){
        times= (times / 60).toFixed(0); // 根据需要调整小数位数
        if(times>24){
         return times= (times / 24).toFixed(0)+" day ago";
        }else{
            return times+" hour ago";
        }
        }else{
            return times+" minute ago"; //分
        }
       }else{
        return times+" secs ago"; //秒
       }
    },
    
     differenceInSeconds(time) {
      const start = time;
      const end = Math.floor(Date.now() / 1000);
      const difference = (end - start); 
      return difference;
    },


   async onLoadBlock(){
      const res=await getTransactionInfo({
        transactionHash:this.inputValue,
       })
        if(null==res.data){
       this.isShow=false
        }
     this.items=res.data
    
   },
  },
  created() {
    this.inputValue = this.$route.params.inputValue;
    this.onLoadBlock();
  },
}
</script>

<style>
.body-color{
  background-color: rgb(0, 0, 0);
  }
</style>